<template>
  <div class="teachlistbox">
    <div class="searchteach">
      <el-form ref="chaxunform" :model="chaxunform" label-width="80px">
        <el-form-item label="工号" prop="gh">
          <el-input
            v-model="chaxunform.gh"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="xm">
          <el-input
            v-model="chaxunform.xm"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="xb">
          <el-select v-model="chaxunform.xb" placeholder="请选择" clearable>
            <el-option
              v-for="item in xb"
              :key="item.value"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间" prop="jssj">
          <div class="block">
            <el-date-picker
              v-model="chaxunform.jssj"
              align="right"
              type="daterange"
              placeholder="选择日期"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              clearable
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="教师职称" prop="jszc">
          <el-select
            clearable
            v-model="chaxunform.jszc"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in jszc"
              :key="item.value"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="岗位职级" prop="gwzj">
          <el-select
            clearable
            v-model="chaxunform.gwzj"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in gwzj"
              :key="item.value"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="部门" prop="bm">
          <el-select
            clearable
            v-model="chaxunform.bm"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in bm"
              :key="item.dictLabel"
              :label="item.dictLabel"
              :value="item.dictValue"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="ejxy">
          <el-select
            clearable
            v-model="chaxunform.ejxy"
            filterable
            placeholder="请选择"
          >
            <el-option
              v-for="item in ejxy"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="lastitem">
          <el-button @click="resetForm('chaxunform')">重置</el-button>
          <el-button class="cha" type="primary" @click="onSubmit('chaxunform')"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="teachcontent">
      <Tabs :zjform="this.fjform"></Tabs>
    </div>
  </div>
</template>

<script>
import Tabs from "../components/title/chose.vue";
import ajax from "../api/ajax.js";
import qs from "qs";
export default {
  created() {
    this.getdatalist();
    this.getuserejxy();
  },
  data() {
    return {
      fjform: {},
      chaxunform: {
        xm: "",
        xb: "",
        gh: "",
        kssj: "",
        jssj: "",
        jszc: "",
        hwzj: "",
        bm: "",
        ejxy: "",
      },
      //日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      //教师职称
      jszc: [],
      //岗位职级
      gwzj: [],
      department: [
        {
          value: "选项1",
          label: "思政部",
        },
        {
          value: "选项2",
          label: "党支部",
        },
        {
          value: "选项3",
          label: "团支部",
        },
      ],
      xy: [],
      xb: [],
      bm: [],
      ejxy: [],
    };
  },
  components: {
    Tabs,
  },
  methods: {
    onSubmit(formName) {
      // if (this.chaxunform.jssj !== null) {
      //   this.chaxunform.kssj = this.chaxunform.jssj[0];
      //   this.chaxunform.jssj = this.chaxunform.jssj[1];
      // }
      this.$refs[formName].validate(async (valid) => {
        console.log(this.chaxunform);
        if (valid) {
          const result = await ajax(
            "fdyxxb/list?" + qs.stringify(this.chaxunform),
            "",
            "get"
          );
          console.log(result);
          this.fjform = result.rows;
        }
        console.log(this.fjform);
      });
    },
    resetForm(form) {
      this.$refs[form].resetFields();
     this.$router.go(0);
    },

    //获取下拉列表
    async getdatalist() {
      const result = await ajax("system/dict/data/list", "", "get");
      // console.log(result);
      for (var i in result.rows) {
        if (result.rows[i].dictType == "sys_user_sex") {
          this.xb.push(result.rows[i]);
        }

        if (result.rows[i].dictType == "sys_js_jszc") {
          this.jszc.push(result.rows[i]);
        }
        if (result.rows[i].dictType == "sys_js_gwzj") {
          this.gwzj.push(result.rows[i]);
        }
      }
      // console.log(this.zzmm);
    }, //二级学院下拉菜单
    async getuserejxy() {
      const result = await ajax(
        "system/dept/treeselect",
        { deptType: 2 },
        "get"
      );
      this.ejxy = JSON.stringify(result.data);
      this.ejxy = JSON.parse(this.ejxy);
      // console.log(this.ejxy);
    },
  },
};
</script>

<style lang="less" scoped>
.teachlistbox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  .searchteach {
    height: 25%;
    background: #fff;
    border-radius: 9px;
  }
  .teachcontent {
    height: 72.5%;
    border-radius: 9px;
    .chose {
      height: 10%;
      margin-bottom: 3px;
      background: #fff;
      border-top-left-radius: 9px;
      border-top-right-radius: 9px;
    }
  }
}
.el-input {
  width: 239px;
}
.el-form {
  margin: 0 auto;
  width: 96%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  height: 85%;
  margin-top: 24px;
}
.el-form-item {
  width: 25%;
  margin-bottom: 17px;
}
.lastitem {
  width: 100% !important;
}
.cha:hover {
  background: #66b1ff;
  border-color: #66b1ff;
}
button:hover {
}
</style>